<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片展示 | sz_00001</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入微软Azure TTS SDK -->
  <script src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@1.34.0/distrib/browser/speech-sdk.min.js"></script>
  
  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .image-shadow {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .fade-in {
        animation: fadeIn 0.8s ease-in-out;
      }
      .scale-in {
        animation: scaleIn 0.6s ease-out;
      }
      .textbox-focus {
        @apply ring-2 ring-primary/50 border-primary outline-none;
      }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes scaleIn {
      from { transform: scale(0.95); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-picture-o text-primary text-xl" aria-hidden="true"></i>
        <h1 class="text-xl font-bold text-dark">图片查看器</h1>
      </div>
      <div class="flex items-center space-x-4">
        <button id="downloadBtn" class="flex items-center space-x-1 text-sm px-3 py-1.5 bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors duration-200">
          <i class="fa fa-download" aria-hidden="true"></i>
          <span>下载图片</span>
        </button>
      </div>
    </div>
  </header>

  <!-- 主要内容区 -->
  <main class="flex-grow container mx-auto px-4 py-8 md:py-16 flex flex-col items-center justify-center">
    <!-- 图片信息卡片 -->
    <div class="w-full max-w-3xl mb-6 bg-white rounded-xl shadow-md p-4 md:p-6 fade-in">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h2 class="text-lg md:text-xl font-semibold text-dark">sz_00113.png</h2>
          <p class="text-gray-500 text-sm md:text-base mt-1">图片文件</p>
        </div>
        <div class="flex items-center space-x-6">
          <div class="text-center">
            <p id="imageWidth" class="text-primary font-medium">--</p>
            <p class="text-gray-500 text-xs">宽度</p>
          </div>
          <div class="text-center">
            <p id="imageHeight" class="text-primary font-medium">--</p>
            <p class="text-gray-500 text-xs">高度</p>
          </div>
          <div class="text-center">
            <p id="imageSize" class="text-primary font-medium">--</p>
            <p class="text-gray-500 text-xs">大小</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片展示容器 -->
    <div class="w-full max-w-4xl bg-white rounded-2xl shadow-lg overflow-hidden p-4 md:p-8 scale-in">
      <div class="flex items-center justify-center">
        <div class="relative">
          <!-- 加载状态指示器 -->
          <div id="loadingIndicator" class="absolute inset-0 flex items-center justify-center bg-gray-50/80 backdrop-blur-sm z-10">
            <div class="flex flex-col items-center">
              <div class="w-12 h-12 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-3"></div>
              <p class="text-gray-600 text-sm">加载中...</p>
            </div>
          </div>
          
          <!-- 图片元素 -->
          <img 
            id="mainImage" 
            src="images/sz_00113.png" 
            alt="sz_00113" 
            class="max-w-full h-auto rounded-lg image-shadow transition-all duration-500 ease-in-out"
            onload="imageLoaded()"
            onerror="imageError()"
          >
          
          <!-- 图片加载错误提示 -->
          <div id="errorMessage" class="hidden absolute inset-0 flex items-center justify-center bg-gray-50/80 backdrop-blur-sm z-10">
            <div class="text-center p-6">
              <i class="fa fa-exclamation-triangle text-red-500 text-3xl mb-3"></i>
              <p class="text-gray-700 font-medium mb-2">图片加载失败</p>
              <p class="text-gray-500 text-sm mb-4">请检查文件路径是否正确</p>
              <button onclick="reloadImage()" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                重试
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区 -->
    <div class="w-full max-w-4xl mt-6 flex justify-center space-x-4 fade-in" style="animation-delay: 0.3s">
      <button id="zoomInBtn" class="w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all duration-200">
        <i class="fa fa-search-plus" aria-hidden="true"></i>
      </button>
      <button id="zoomOutBtn" class="w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all duration-200">
        <i class="fa fa-search-minus" aria-hidden="true"></i>
      </button>
      <button id="resetZoomBtn" class="w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all duration-200">
        <i class="fa fa-refresh" aria-hidden="true"></i>
      </button>
    </div>

    <!-- TTS文本朗读区域 -->
    <div class="w-full max-w-3xl mt-12 bg-white rounded-2xl shadow-lg p-6 md:p-8 fade-in" style="animation-delay: 0.5s">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-dark flex items-center">
          <i class="fa fa-microphone text-primary mr-2" aria-hidden="true"></i>
          文本朗读
        </h3>
        <span class="text-xs text-gray-500">支持实时编辑和语音播放</span>
      </div>
      
      <div class="relative mb-4">
        <textarea 
          id="ttsText" 
          class="w-full px-4 py-3 border border-gray-300 rounded-lg resize-none transition-all duration-200 focus:textbox-focus h-32 md:h-24"
          placeholder="请输入要朗读的文本..."
        >亲爱的同学们，我是你们的小莉老师，欢迎你们来这里学习！</textarea>
        <div class="absolute right-3 bottom-3 text-gray-400 text-xs">
          <span id="charCount">41</span> 字符
        </div>
      </div>
      
      <div class="flex flex-wrap gap-3">
        <button id="playBtn" class="flex items-center space-x-2 px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg">
          <i class="fa fa-play-circle-o text-lg" aria-hidden="true"></i>
          <span>播放语音</span>
        </button>
        <button id="pauseBtn" class="flex items-center space-x-2 px-5 py-2.5 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-all duration-200 shadow-md hover:shadow-lg" disabled>
          <i class="fa fa-pause-circle-o text-lg" aria-hidden="true"></i>
          <span>暂停</span>
        </button>
        <button id="stopBtn" class="flex items-center space-x-2 px-5 py-2.5 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-all duration-200 shadow-md hover:shadow-lg" disabled>
          <i class="fa fa-stop-circle-o text-lg" aria-hidden="true"></i>
          <span>停止</span>
        </button>
        
        <div class="ml-auto flex items-center space-x-4">
          <div class="flex items-center">
            <label for="voiceSelect" class="text-sm text-gray-600 mr-2">语音：</label>
            <select id="voiceSelect" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:textbox-focus">
              <option value="zh-CN-XiaoxiaoNeural">晓晓（女）</option>
              <option value="zh-CN-YunxiNeural">云溪（女）</option>
              <option value="zh-CN-YunjianNeural">云健（男）</option>
              <option value="zh-CN-XiaoyouNeural">小优（女）</option>
              <option value="zh-CN-XiaoliNeural" selected>小莉（女）</option>
              <option value="zh-CN-XiaochenNeural">小陈（男）</option>
            </select>
          </div>
          
          <div class="flex items-center">
            <label for="speedRange" class="text-sm text-gray-600 mr-2">语速：</label>
            <input 
              type="range" 
              id="speedRange" 
              min="0.5" 
              max="2" 
              step="0.1" 
              value="1" 
              class="w-24 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"
            >
            <span id="speedValue" class="text-sm text-gray-600 ml-2">1.0x</span>
          </div>
        </div>
      </div>
      
      <!-- 播放状态提示 -->
      <div id="playbackStatus" class="mt-4 hidden items-center text-sm">
        <i class="fa fa-volume-up text-primary mr-2" aria-hidden="true"></i>
        <span id="statusText">正在播放...</span>
      </div>
      
      <!-- 错误提示 -->
      <div id="ttsError" class="mt-4 hidden items-center text-sm text-red-500">
        <i class="fa fa-exclamation-circle mr-2" aria-hidden="true"></i>
        <span>语音播放失败，请检查网络连接或API配置</span>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-6 mt-12">
    <div class="container mx-auto px-4 text-center">
      <p class="text-gray-400">图片查看器 &copy; 2024</p>
      <p class="text-gray-500 text-sm mt-2">简洁、高效的图片展示解决方案 | 集成微软TTS语音朗读功能</p>
    </div>
  </footer>

  <!-- JavaScript 功能 -->
  <script>
    // 获取DOM元素
    const mainImage = document.getElementById('mainImage');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const errorMessage = document.getElementById('errorMessage');
    const imageWidth = document.getElementById('imageWidth');
    const imageHeight = document.getElementById('imageHeight');
    const imageSize = document.getElementById('imageSize');
    const zoomInBtn = document.getElementById('zoomInBtn');
    const zoomOutBtn = document.getElementById('zoomOutBtn');
    const resetZoomBtn = document.getElementById('resetZoomBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    
    // TTS相关元素
    const ttsText = document.getElementById('ttsText');
    const playBtn = document.getElementById('playBtn');
    const pauseBtn = document.getElementById('pauseBtn');
    const stopBtn = document.getElementById('stopBtn');
    const voiceSelect = document.getElementById('voiceSelect');
    const speedRange = document.getElementById('speedRange');
    const speedValue = document.getElementById('speedValue');
    const charCount = document.getElementById('charCount');
    const playbackStatus = document.getElementById('playbackStatus');
    const ttsError = document.getElementById('ttsError');
    
    // 初始缩放比例
    let currentScale = 1;
    const scaleStep = 0.1;
    const maxScale = 3;
    const minScale = 0.5;
    
    // TTS相关变量
    let speechSynthesizer = null;
    let isPlaying = false;
    
    // 初始化微软TTS（使用浏览器内置语音合成API作为备选）
    function initTTS() {
      // 检查浏览器是否支持Web Speech API
      if ('speechSynthesis' in window) {
        console.log('浏览器支持Web Speech API，将使用内置TTS引擎');
      } else {
        console.log('浏览器不支持Web Speech API，请使用现代浏览器');
        showTtsError('您的浏览器不支持语音合成功能，请升级到最新版本的Chrome、Edge或Safari浏览器');
      }
      
      // 更新字符计数
      updateCharCount();
    }
    
    // 图片加载完成处理
    function imageLoaded() {
      // 隐藏加载指示器
      loadingIndicator.classList.add('hidden');
      
      // 显示图片尺寸信息
      imageWidth.textContent = mainImage.naturalWidth + 'px';
      imageHeight.textContent = mainImage.naturalHeight + 'px';
      
      // 获取图片文件大小（需要服务器支持或本地文件系统访问）
      // 这里使用估算方法，实际项目中可能需要AJAX请求获取文件信息
      estimateImageSize();
    }
    
    // 图片加载失败处理
    function imageError() {
      loadingIndicator.classList.add('hidden');
      errorMessage.classList.remove('hidden');
    }
    
    // 重新加载图片
    function reloadImage() {
      errorMessage.classList.add('hidden');
      loadingIndicator.classList.remove('hidden');
      mainImage.src = '';
      setTimeout(() => {
        mainImage.src = 'images/sz_00113.png';
      }, 500);
    }
    
    // 估算图片大小（基于像素和位深度）
    function estimateImageSize() {
      // PNG图片每个像素约3-4字节（RGBA）
      const estimatedSizeInBytes = mainImage.naturalWidth * mainImage.naturalHeight * 3.5;
      const estimatedSizeInKB = estimatedSizeInBytes / 1024;
      const estimatedSizeInMB = estimatedSizeInKB / 1024;
      
      if (estimatedSizeInMB >= 1) {
        imageSize.textContent = estimatedSizeInMB.toFixed(2) + ' MB';
      } else {
        imageSize.textContent = Math.round(estimatedSizeInKB) + ' KB';
      }
    }
    
    // 缩放功能
    zoomInBtn.addEventListener('click', () => {
      if (currentScale < maxScale) {
        currentScale += scaleStep;
        applyScale();
      }
    });
    
    zoomOutBtn.addEventListener('click', () => {
      if (currentScale > minScale) {
        currentScale -= scaleStep;
        applyScale();
      }
    });
    
    resetZoomBtn.addEventListener('click', () => {
      currentScale = 1;
      applyScale();
    });
    
    // 应用缩放
    function applyScale() {
      mainImage.style.transform = `scale(${currentScale})`;
      // 添加轻微的阴影变化增强视觉效果
      if (currentScale > 1) {
        mainImage.classList.add('shadow-xl');
      } else {
        mainImage.classList.remove('shadow-xl');
      }
    }
    
    // 下载图片功能
    downloadBtn.addEventListener('click', () => {
      // 创建临时下载链接
      const downloadLink = document.createElement('a');
      downloadLink.href = mainImage.src;
      downloadLink.download = 'sz_00113.png';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
      
      // 显示下载提示（可选）
      alert('图片下载已开始');
    });
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const header = document.querySelector('header');
      if (window.scrollY > 10) {
        header.classList.add('py-2', 'shadow');
        header.classList.remove('py-3', 'shadow-sm');
      } else {
        header.classList.add('py-3', 'shadow-sm');
        header.classList.remove('py-2', 'shadow');
      }
    });
    
    // TTS功能 - 更新字符计数
    function updateCharCount() {
      const count = ttsText.value.length;
      charCount.textContent = count;
      
      // 如果文本为空，禁用播放按钮
      if (count === 0) {
        playBtn.disabled = true;
        playBtn.classList.add('opacity-50', 'cursor-not-allowed');
        playBtn.classList.remove('hover:bg-primary/90', 'hover:shadow-lg');
      } else {
        playBtn.disabled = false;
        playBtn.classList.remove('opacity-50', 'cursor-not-allowed');
        playBtn.classList.add('hover:bg-primary/90', 'hover:shadow-lg');
      }
    }
    
    // TTS功能 - 播放语音
    function playTTS() {
      if (!('speechSynthesis' in window)) {
        showTtsError('浏览器不支持语音合成功能');
        return;
      }
      
      // 停止当前可能正在播放的语音
      stopTTS();
      
      const text = ttsText.value.trim();
      if (!text) return;
      
      // 创建语音合成对象
      const utterance = new SpeechSynthesisUtterance(text);
      
      // 设置语音参数
      utterance.lang = 'zh-CN';
      utterance.rate = parseFloat(speedRange.value); // 语速
      utterance.pitch = 1; // 音调
      utterance.volume = 1; // 音量
      
      // 设置选中的语音
      const selectedVoice = voiceSelect.value;
      const voices = window.speechSynthesis.getVoices();
      const voice = voices.find(v => v.name === selectedVoice || v.voiceURI === selectedVoice);
      if (voice) {
        utterance.voice = voice;
      }
      
      // 语音播放事件监听
      utterance.onstart = () => {
        isPlaying = true;
        updateTTSButtons();
        showPlaybackStatus('正在播放...');
        hideTtsError();
      };
      
      utterance.onpause = () => {
        isPlaying = false;
        updateTTSButtons();
        showPlaybackStatus('已暂停');
      };
      
      utterance.onresume = () => {
        isPlaying = true;
        updateTTSButtons();
        showPlaybackStatus('继续播放...');
      };
      
      utterance.onend = () => {
        isPlaying = false;
        updateTTSButtons();
        hidePlaybackStatus();
      };
      
      utterance.onerror = (event) => {
        isPlaying = false;
        updateTTSButtons();
        hidePlaybackStatus();
        showTtsError(`播放失败: ${event.error}`);
      };
      
      // 开始播放
      window.speechSynthesis.speak(utterance);
      
      // 保存当前语音对象以便后续控制
      speechSynthesizer = utterance;
    }
    
    // TTS功能 - 暂停语音
    function pauseTTS() {
      if ('speechSynthesis' in window && isPlaying) {
        window.speechSynthesis.pause();
      }
    }
    
    // TTS功能 - 继续播放语音
    function resumeTTS() {
      if ('speechSynthesis' in window && !isPlaying) {
        window.speechSynthesis.resume();
      }
    }
    
    // TTS功能 - 停止语音
    function stopTTS() {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        isPlaying = false;
        updateTTSButtons();
        hidePlaybackStatus();
      }
    }
    
    // TTS功能 - 更新按钮状态
    function updateTTSButtons() {
      if (isPlaying) {
        playBtn.disabled = true;
        playBtn.classList.add('opacity-50', 'cursor-not-allowed');
        pauseBtn.disabled = false;
        pauseBtn.classList.remove('opacity-50', 'cursor-not-allowed');
        stopBtn.disabled = false;
        stopBtn.classList.remove('opacity-50', 'cursor-not-allowed');
      } else {
        playBtn.disabled = ttsText.value.trim() === '';
        playBtn.classList.toggle('opacity-50', playBtn.disabled);
        playBtn.classList.toggle('cursor-not-allowed', playBtn.disabled);
        pauseBtn.disabled = true;
        pauseBtn.classList.add('opacity-50', 'cursor-not-allowed');
        stopBtn.disabled = true;
        stopBtn.classList.add('opacity-50', 'cursor-not-allowed');
      }
    }
    
    // TTS功能 - 显示播放状态
    function showPlaybackStatus(message) {
      playbackStatus.classList.remove('hidden');
      playbackStatus.classList.add('flex');
      document.getElementById('statusText').textContent = message;
    }
    
    // TTS功能 - 隐藏播放状态
    function hidePlaybackStatus() {
      playbackStatus.classList.add('hidden');
      playbackStatus.classList.remove('flex');
    }
    
    // TTS功能 - 显示错误信息
    function showTtsError(message) {
      ttsError.classList.remove('hidden');
      ttsError.classList.add('flex');
      ttsError.querySelector('span').textContent = message;
    }
    
    // TTS功能 - 隐藏错误信息
    function hideTtsError() {
      ttsError.classList.add('hidden');
      ttsError.classList.remove('flex');
    }
    
    // 加载可用语音列表
    function loadVoices() {
      if (!('speechSynthesis' in window)) return;
      
      const voices = window.speechSynthesis.getVoices();
      const chineseVoices = voices.filter(voice => voice.lang === 'zh-CN');
      
      // 如果有可用的中文语音，更新下拉列表
      if (chineseVoices.length > 0) {
        // 清空现有选项（保留默认选项）
        const currentValue = voiceSelect.value;
        voiceSelect.innerHTML = '';
        
        // 添加检测到的语音
        chineseVoices.forEach(voice => {
          const option = document.createElement('option');
          option.value = voice.name;
          option.textContent = voice.name + (voice.localService ? ' (本地)' : ' (在线)');
          voiceSelect.appendChild(option);
        });
        
        // 如果之前选中的语音不存在，默认选中第一个
        if (!chineseVoices.some(v => v.name === currentValue)) {
          voiceSelect.selectedIndex = 0;
        }
      }
    }
    
    // TTS事件监听
    ttsText.addEventListener('input', updateCharCount);
    
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        resumeTTS();
      } else {
        playTTS();
      }
    });
    
    pauseBtn.addEventListener('click', pauseTTS);
    stopBtn.addEventListener('click', stopTTS);
    
    speedRange.addEventListener('input', () => {
      const speed = speedRange.value;
      speedValue.textContent = speed + 'x';
      
      // 如果正在播放，更新语速
      if (isPlaying && 'speechSynthesis' in window) {
        stopTTS();
        setTimeout(playTTS, 100);
      }
    });
    
    // 监听语音列表加载完成事件
    if ('speechSynthesis' in window) {
      window.speechSynthesis.onvoiceschanged = loadVoices;
    }
    
    // 页面加载完成后初始化
    window.addEventListener('DOMContentLoaded', () => {
      initTTS();
      loadVoices();
      
      // 初始化按钮状态
      updateTTSButtons();
    });
  </script>
</body>
</html>